<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/*
			  事件:
			  1.事件源
			  2.事件类型
			  3.事件处理
			*/
			function getNode01() {
				//根据标签的id属性值获取该标签节点对象
				var divNode = document.getElementById("d1");
				divNode.innerHTML = "zhangsan";
			}

			function getNode02() {
				//根据标签名称获取该标签节点对象，返回值是一个对象数组
				var aNode = document.getElementsByTagName("a");
				aNode[0].innerHTML = "淘宝";
				aNode[0].href = "https://www.taobao.com/";
				aNode[0].target = "_blank";
			}

			function getNode03() {
				//根据标签的样式名称获取该标签节点对象，返回值是一个对象数组
				var divNode = document.getElementsByClassName("dv");
				divNode[0].innerHTML = "zhangsan123";
			}

			function getNode04() {
				//根据选择器获取第一个节点对象
				var divNode = document.querySelector(".dv");
				divNode.innerHTML = "zhangsan123";
			}

			function getNode05() {
				//根据选择器获取所有节点对象，返回值是一个对象数组
				var divNode = document.querySelectorAll(".dv");
				// divNode[1].innerHTML = "<span style='color: greenyellow'>zhangsan123</span>";
				divNode[1].innerText = "<span style='color: greenyellow'>zhangsan123</span>";
				// console.dir(divNode);
			}
		</script>
	</head>
	<body>
		<div id="d1">lisi</div>
		<a href="https://www.jd.com/">京东</a>
		<div class="dv">zhangsan</div>
		<div class="dv">wangwu</div>
		<hr />
		<button onclick="getNode01()">演示document.getElementById()</button>
		<button onclick="getNode02()">演示document.getElementById()</button>
		<button onclick="getNode03()">演示document.getElementsByClassName()</button>
		<button onclick="getNode04()">演示document.querySelector()</button>
		<button onclick="getNode05()">演示document.querySelectorAll()</button>
	</body>
</html>
